<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频帧提取测试</title>
</head>

<body>
    <form id="videoForm">
        <input type="text" id="videoUrl" placeholder="请输入视频地址" value="https://p26-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/d2238b709ca44f098d37e35e7434bdfe.mp4~tplv-mdko3gqilj-image.image?rk3s=81d4c505&x-expires=1773133164&x-signature=w4naqU1%2Fv9%2F7BT2Q44NhWb2KE90%3D&x-wf-file_name=27872003802-1-192.mp4">
        <select id="precision">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <button type="submit">提交</button>
    </form>
    <script>
        document.getElementById('videoForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            const videoUrl = document.getElementById('videoUrl').value;
            const precision = document.getElementById('precision').value;
            try {
                const response = await fetch('/api/extract-frames', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ url: videoUrl, precision: parseInt(precision) })
                });
                const data = await response.json();
                console.log(data);
            } catch (error) {
                console.error('请求出错:', error);
            }
        });
    </script>
</body>

</html>